<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!--引入 element js css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>

    <script src="js/axios-0.18.0.js"></script>


</head>
<body>
<!--            :current-page   当前页
                :page-size   每页显示条数
                :total  总记录数
                @size-change  当切换每页多少条数据时触发
                @current-change  当切换页码时触发

-->
<div id="app">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

</div>


<script>
    new Vue({
        el: "#app",
        data:{
            currentPage4: 3,
            total:600
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                //根据当前用户查看的页码，去后台查询这一页数据展示到页面上
            }
        }
    });
</script>
</body>
</html>